<template>
  <div id="cart">
    <!-- 导航 -->
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{ len }})</div>
    </nav-bar>

    <!-- 商品列表 -->
    <scroll class="cart-content-view" ref="scroll">
      <cart-list></cart-list>
    </scroll>

    <!-- 底部汇总 -->
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
// 引入公共组件
import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/scroll/Scroll";

// 引入子组件
import CartList from "./childComps/CartList";
import CartBottomBar from "./childComps/CartBottomBar";

// 引入vuex的
import { mapGetters } from "vuex";

export default {
  name: "Cart",
  components: {
    NavBar,
    Scroll,
    CartList,
    CartBottomBar,
  },

  computed: {
    // 如何将getters直接转换成计算属性使用: 使用mapGetters辅助函数将store中的getter映射到局部计算属性
    // 1. 第一种语法: 数组语法 固定getters名称映射
    // ...mapGetters(["cartLength"]),
    // 2. 第二种语法: 对象语法 能够自定义getters名称进行映射 >>> 如果你想给getter去个名字的话
    ...mapGetters({
      len: "cartLength",
    }),
  },

  activated() {
    // console.log("购物车页面活跃了");
    this.$refs.scroll.refresh();
  },
};
</script>

<style lang="less" scoped>
#cart {
  position: relative;
  height: 100vh;
  .nav-bar {
    color: var(--color-background);
    background-image: linear-gradient(
      to right,
      var(--color-tint),
      var(--color-high-text)
    );
  }

  .cart-content-view {
    height: calc(100% - 44px - 44px - 50px);
    overflow: hidden;
  }
}
</style>